<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts Ring Chart with Aligned Legend</title>
    <style>
        #chart {
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="chart"></div>
</div>

<!-- Include ECharts from CDN -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
    // 数据（与图片一致）
    const data = [
        { name: "数据局", value: 1300, percentage: 13 },
        { name: "数据处", value: 1200, percentage: 12 },
        { name: "数据主中心", value: 1300, percentage: 13 },
        { name: "数据主中中心", value: 1200, percentage: 12 },
        { name: "数据中中心", value: 1200, percentage: 12 },
        { name: "数据主中心", value: 1600, percentage: 16 },
        { name: "数据主中中心", value: 1600, percentage: 16 },
        { name: "数据次中心", value: 1600, percentage: 16 }
    ];

    // 颜色（与图片一致）
    const colors = [
        "#1E90FF", // 数据局
        "#00CED1", // 数据处
        "#20B2AA", // 数据主中心
        "#3CB371", // 数据主中中心
        "#FF6347", // 数据中中心
        "#FF4500", // 数据主中心
        "#FFA500", // 数据主中中心
        "#FFD700"  // 数据次中心
    ];

    // 初始化 ECharts
    const chart = echarts.init(document.getElementById('chart'));

    // 配置图表选项
    const option = {
        // 中心文字
        graphic: {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
                text: '325\n总数',
                textAlign: 'center',
                fill: '#000',
                fontSize: 40,
                fontWeight: 'bold',
                lineHeight: 60
            }
        },
        // 图例配置
        legend: {
            orient: 'horizontal',
            bottom: 10,
            width: 400, // 控制图例总宽度，确保两列布局
            data: data.map(item => item.name),
            itemWidth: 15, // 图例图标宽度
            itemHeight: 15, // 图例图标高度
            itemGap: 10, // 图例项之间的间距
            formatter: (name) => {
                const item = data.find(d => d.name === name);
                return `{name|${name}}{value|${item.value}}{percentage|${item.percentage}%}`;
            },
            textStyle: {
                rich: {
                    name: {
                        width: 80, // 名称固定宽度
                        align: 'left'
                    },
                    value: {
                        width: 40, // 数值固定宽度
                        align: 'right'
                    },
                    percentage: {
                        width: 40, // 百分比固定宽度
                        align: 'right'
                    }
                }
            }
        },
        // 环形图系列
        series: [
            {
                type: 'pie',
                radius: ['40%', '55%'], // 内外半径
                center: ['50%', '50%'],
                data: data.map((item, index) => ({
                    name: item.name,
                    value: item.value,
                    itemStyle: { color: colors[index] }
                })),
                label: {
                    show: false
                },
                emphasis: {
                    label: {
                        show: false
                    }
                }
            }
        ],
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)'
        }
    };

    // 渲染图表
    chart.setOption(option);
</script>
</body>
</html>
